<template>
<q-dialog persistent fixed v-model="isReferDialog" :maximized="$q.platform.is.mobile" position="standard" transition-show="slide-up" transition-hide="slide-down">
    <q-layout view="hHh Lpr fFf" container class="bg-dark hide-scrollbar">
        <q-header class="bg-grey-10 shadow-7">

            <q-toolbar>
                <q-toolbar-title>参考画面</q-toolbar-title>
                <q-space />

                <q-btn dense flat icon="close" @click="handleClose">
                </q-btn>
            </q-toolbar>

        </q-header>
        <q-footer class="bg-grey-10 text-white  shadow-up-7">

            <q-toolbar class="q-pa-sm" dense inset>

                <q-space></q-space>

                <q-btn dense outline class="q-px-md" @click="confirmRefer"> 确认</q-btn>
            </q-toolbar>
        </q-footer>
        <q-page-container>
            <q-page class="bg-dark column hide-scrollbar ">
                <q-card class="bg-transparent q-pa-none">
                    <q-tabs v-model="tab" dense class="text-grey bg-dark" active-color="primary" indicator-color="primary" align="justify" narrow-indicator>
                        <q-tab name="upload" label="上传" />
                        <q-tab name="recce" label="堪景" />
                        <q-tab name="library" label="镜头库" />
                    </q-tabs>

                    <q-separator color="grey-9" />

                    <q-tab-panels class="bg-dark text-white" v-model="tab" animated>
                        <q-tab-panel name="upload">
                            <q-uploader ref="Uploader" dark flat draggable :auto-upload="false" multiple class="bolder-line full-width" accept=".png,.jpg" @added="handleAddFiles" @rejected="handleRejectFiles" @removed="handleRemoveFiles"> <template v-slot:header="scope">
                                    <div class="row no-wrap justify-between">
                                        <div class="q-pa-sm">
                                            <div>上传文件</div>
                                            <div class="text-caption">文件类型：jpg,png</div>
                                        </div>
                                        <div class="row flex-center">
                                            <q-btn v-if="scope.canAddFiles" type="a" icon="add_box" round dense flat>
                                                <q-uploader-add-trigger />

                                            </q-btn>
                                            <q-btn v-if="scope.canUpload" icon="cloud_upload" @click="scope.upload" round dense flat>
                                                <q-tooltip>上传文件</q-tooltip>
                                            </q-btn>
                                        </div>

                                    </div>

                                </template>
                                <template v-slot:list="scope">
                                    <!-- <div>      <span class="text-italic text-primary">或点击选择
                                    <q-uploader-add-trigger /></span></div> -->
                                    <div ref="uploadContainer">
                                        <q-list v-if="fileList.length==0">
                                            <q-item class="row items-center text-caption">
                                                <q-item-label class="full-width column items-center q-gutter-sm ellipsis">
                                                    <span>将文件拖到此处或</span>
                                                    <span>粘贴添加</span>
                                                </q-item-label>
                                                <div class="row items-center text-caption"> </div>

                                            </q-item>

                                        </q-list>

                                        <q-list separator>

                                            <q-item v-for="file in scope.files" :key="file.__key">
                                                <q-item-section>
                                                    <q-item-label class="full-width ellipsis">
                                                        {{ file.name }}
                                                    </q-item-label>
                                                    <q-item-label class="text-grey-5" caption>
                                                        {{ file.__sizeLabel }}
                                                    </q-item-label>
                                                </q-item-section>

                                                <q-item-section v-if="file.__img" thumbnail class="gt-xs">
                                                    <img :src="file.__img.src">
                                                </q-item-section>

                                                <q-item-section side>
                                                    <q-btn class="gt-xs" size="12px" flat dense round icon="delete" @click="scope.removeFile(file)" />
                                                </q-item-section>
                                            </q-item>

                                        </q-list>
                                    </div>

                                </template>
                            </q-uploader>
                        </q-tab-panel>

                        <q-tab-panel name="recce">
                            <div class="text-h6">Alarms</div>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        </q-tab-panel>

                        <q-tab-panel name="library">
                            <div class="text-h6">Movies</div>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        </q-tab-panel>
                    </q-tab-panels>
                </q-card>

            </q-page>
        </q-page-container>

    </q-layout>

</q-dialog>
</template>

<script>
export default {
    name: 'ReferDialog',
    props: {
        isReferDialog: {
            default: false
        },
        row: {
            type: Object
        }
    },
    data() {
        return {
            tab: 'upload',
            fileList: []
        }
    },
    mounted() {

    },
    watch: {
        isReferDialog: function (val) {
            if (val) {
                setTimeout(() => {
                    console.log(this.$refs.Uploader.$el);
                    window.addEventListener('keydown', this.handlePaste)
                }, 200)

            } else {
                window.removeEventListener('keydown', this.handlePaste)
            }

        }
    },
    beforeDestroy() {

    },
    methods: {
        async getClipboardContents() {
            try {
                const clipboardItems = await navigator.clipboard.read();

                for (const clipboardItem of clipboardItems) {

                    for (const type of clipboardItem.types) {
                        const blob = await clipboardItem.getType(type);
                        return blob
                    }

                }

            } catch (err) {
                console.error(err.name, err.message);
            }
        },
        handlePaste(e) {
            if (e.ctrlKey) {
                if (e.keyCode == 67) {
                    console.log('复制')

                }
                if (e.keyCode == 86) {
                    console.log('粘贴', e);
                    this.getClipboardContents().then(res => {
                        console.log(res);
                        let time= this.$moment(Date.now()).format('YYYYMMDDHHmmss')+'.jpg'
                        var file = new File([res], time, {
                          __img:'img',
                            type: 'image/jpeg',
                            lastModified: Date.now()
                        });
                        let files = []
                        console.log(file);
                        files.push(file)
                        this.$refs.Uploader.addFiles(files)
                        this.fileList.push(file)
                    })

                }
            }

        },
        handleAddFiles(files) {
            console.log('add files', files);

            this.fileList = this.fileList.concat(files);
            console.log('filelist', this.fileList);
        },
        handleRemoveFiles(file) {
            let index = this.fileList.findIndex(i => i.name == file.name);
            if (index != -1) {
                this.fileList.splice(index, 1)
            }

            console.log('remove files', file);
        },
        handleRejectFiles(files) {
            console.log('reject files', files);
        },

        handleClose() {
            this.$emit('update:isReferDialog', false)
        },
        confirmRefer() {

        }
    }
}
</script>
